<template>
  <div class="home">
    <h1 class="title">去中心化投票系统</h1>

    <div class="card">
      <WalletConnect />
    </div>

    <div class="card">
      <AddCandidate />
    </div>

    <div class="card">
      <CandidateList />
    </div>

    <router-link to="/results" class="results-link">📊 查看投票结果</router-link>
  </div>
</template>

<script setup>
import WalletConnect from '../components/WalletConnect.vue';
import CandidateList from '../components/CandidateList.vue';
import AddCandidate from '../components/AddCandidate.vue';
</script>

<style scoped>
.home {
  max-width: 500px;
  margin: 0 auto;
  padding: 36px 12px 24px 12px;
}

/* 标题：大、稳重、商务蓝 */
.title {
  text-align: center;
  font-size: 2.1rem;
  font-weight: 600;
  margin-bottom: 36px;
  color: #25355a;
  letter-spacing: 0.01em;
}

/* 卡片样式：边框+淡阴影，留白充分 */
.card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e9ef;
  box-shadow: 0 2px 10px rgba(50,60,90,0.06);
  padding: 28px 20px 20px 20px;
  margin-bottom: 22px;
}

/* 商务风按钮型链接 */
.results-link {
  display: block;
  margin-top: 32px;
  margin-bottom: 0;
  text-align: center;
  font-size: 1.06rem;
  background-color: #27468a;
  color: #fff;
  padding: 13px 0;
  border-radius: 7px;
  border: 1px solid #27468a;
  text-decoration: none;
  font-weight: 500;
  box-shadow: 0 1px 3px rgba(39,70,138,0.06);
  transition: 
    background 0.2s,
    border 0.2s,
    color 0.2s,
    box-shadow 0.2s;
}
.results-link:hover {
  background: #1d335e;
  border-color: #1d335e;
  color: #fff;
}

@media (max-width: 640px) {
  .home {
    max-width: 98vw;
    padding: 12px 2vw 16px 2vw;
  }
  .card {
    padding: 14px 6px 14px 6px;
  }
  .title {
    font-size: 1.3rem;
    margin-bottom: 18px;
  }
  .results-link {
    font-size: 1rem;
    padding: 10px 0;
    margin-top: 20px;
  }
}
</style>
